import { Box, HStack, Text, VStack } from '@chakra-ui/react';
import React from 'react';
import { useAppSelector } from '../../redux/hooks';

export default function UsersAndScores(): JSX.Element {
  const { players } = useAppSelector((state) => state.game);

  return (
    <VStack
      align="flex-start"
      spacing={2}
      p={5}
      border="2px solid"
      borderColor="teal.500"
      borderRadius="xl"
      boxShadow="2xl"
      bg="blue.200"
      width="full"
      maxWidth="md" // Установлена максимальная ширина как "md" для уменьшения ширины
      m="0 auto"
      minHeight="71vh"
    >
      <Text fontSize="3xl" fontWeight="bold">
        Игроки и их очки:
      </Text>
      {players.map((player) => (
        <Box key={player.id} width="100%" borderRadius="lg" p={1} mb={2} bg="yellow.400" height={10}>
          <HStack justify="space-between">
            <Text color="black" fontSize="2xl">{player.name}</Text>
            <Text color="black" fontSize="2xl">{player.score}</Text>
          </HStack>
        </Box>
      ))}
    </VStack>
  );
}